<template>
  <div id="SkillFollowDobSelect">
    <crumb />
    <div class="main">
        <div class='main-title'>请选择角色进行配音</div>
        <div class="main-item">
            <div class="main-item_item" v-for="(item, index) in roleData" :key="index"  @click="select(item)">
                <div class="main-item_item_img">
                    <img src="@/assets/images/home_tx@2x.png" alt=""/>
                </div>
                <div class="main-item_item_name">{{item.role_name}}</div>
            </div>
        </div>
    </div>
    <el-dialog
      id="SkillFollowDobSelect_dialog"
      :visible.sync="dialogVisible"
      width="250px"
      center
      top='20vh'
      :close-on-press-escape='false'
      :close-on-click-modal='false'
      :show-close='false'
      >
      <div slot="title">
          <span class="dialog_title">开始倒计时</span>
      </div>
      <div class="content">
       <div class="timeDown">{{timeDown}}</div>
      </div>
      <!-- <span slot="footer" class="dialog-footer">
        <el-button type="primary" v-if="!isSound" @click="retrySound">重试</el-button>
        <el-button type="primary" v-if="isSound&&!isStart" @click="startRecording">开始</el-button>
      </span> -->
    </el-dialog>
  </div>
</template>

<script>
import { speechEnterDubRole } from '@/api/student/training/speech'
export default {
  name: 'SkillFollowDobSelect',
  components: {},
  data () {
    return {
      dialogVisible: false,
      roleData: [],
      timeDown: 3
    }
  },
  mounted () {
    this.speechEnterDubRole()
  },
  methods: {
    async speechEnterDubRole () {
      const res = await speechEnterDubRole({
        'lessonOralCatalogId': this.$route.query.lessonOralCatalogId,
        'resourceOralId': this.$route.query.resourceOralId
        // 'lessonOralCatalogId': '656592417145712640',
        // 'resourceOralId': '656632939981119488'
      })
      console.log(res)
      this.roleData = res.data.roleList
    },
    select (item) {
    //   console.log(item)
      this.dialogVisible = true
      function setTimeLess () {
        if (!this.timeDown) {
          this.$router.push({ name: 'skillfollowdublist',
            query: { role_id: item.role_id, resourceOralId: this.$route.query.resourceOralId, lessonOralCatalogId: this.$route.query.lessonOralCatalogId, lessonOralBatchId: this.$route.query.lessonOralBatchId } })
        } else {
          this.timeDown--
          setTimeout(setTimeLess.bind(this), 1000)
        }
      }
      setTimeout(setTimeLess.bind(this), 1000)
    }
  }
}
</script>

<style scoped lang="scss" >
#SkillFollowDobSelect{
    .main{
        height: 100%;
        display: flex;
        flex-flow: column;
        justify-content: center;
        align-items: center;
        &-title{
            font-size: 18px;
            margin-bottom: 30px;
            font-weight: bold;
        }
        &-item{
            display: flex;
            width: 600px;
            justify-content: space-around;
            padding: 30px 0;
            &_item{
                cursor: pointer;
                &_img{
                    text-align: center;
                    width: 80px;
                    border-radius: 40px;
                    height: 80px;
                    border: 1px solid rgba(0,0,0,.7);
                    overflow: hidden;
                    img{
                        width:100%;
                    }
                }
                &_name{
                    margin-top: 25px;
                    text-align: center;
                }
            }
        }
    }
}
#SkillFollowDobSelect_dialog{
    .el-dialog {
        border-radius: 5px;
        .dialog_title{
            font-size: 14px;
         }
         .el-dialog__body{
             padding: 5px 30px 10px 30px !important;
            .content{
                text-align:center;
                display: flex;
                justify-content: center;
            }
            .timeDown{
                width: 60px;
                /* border: 1px solid red; */
                height: 60px;
                line-height: 60px;
                border-radius: 30px;
                color: white;
                background: rgba(130,130,130,1);
            }
         }
    }
}

</style>
